<!--
 * @Author: liaoxing
 * @Date: 2021-08-11 17:53:48
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-11 19:36:27
 * @Description: file content
 * @FilePath: \数据中心\src\components\_Hlsvideo\Hlsvideo.vue
-->
<template>
  <video :id="videoId" muted width="100%" height="100%" type="application/x-mpegURL" controls></video>
</template>

<script>
// let Hls = require('hls.js')
export default {
  name: '',
  components: {},
  props: {
    src: {
      type: String,
      default: '',
      required: true,
    },
    autoPlay: {
      type: Boolean,
      deffaut: true,
    },
  },
  data() {
    return {
      hls: '',
    }
  },
  computed: {
    videoId() {
      return 'video' + parseInt(Math.random() * 1000000)
    },
  },
  created() {},
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.playM3u8(this.src)
    })
  },
  methods: {
    playM3u8(url) {
      var Hls = window['Hls']
      if (Hls.isSupported()) {
        var video = document.getElementById(this.videoId)
        // video.volume = 1.0
        // video.type = 'application/x-mpegURL'
        this.hls = new Hls()
        var m3u8Url = decodeURIComponent(url)
        this.hls.loadSource(m3u8Url)
        this.hls.attachMedia(video)
        this.hls.on(Hls.Events.MANIFEST_PARSED, function () {
          video.play()
        })
      }
    },
    backPlayVideo() {
      document.getElementById(this.videoId).currentTime = 0
    },
    playVideo() {
      this.playM3u8(this.src)
    },
    fullScreenVideo() {
      document.getElementById(this.videoId).requestFullscreen()
    },
  },
  beforeDestroy() {
    if (this.hls) {
      this.hls.destroy()
      this.hls = null
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
}
</script>

<style lang='sass' scoped>
</style>